<template>
  <section>

    <div class="bii-box-section">

      <div class="tab-nav">
        <div @click="handleType('date')" class="item" :class="{ 'active': (listQuery.type == 'date') }">今天</div>
        <div @click="handleType('week')" class="item" :class="{ 'active': (listQuery.type == 'week') }">本周</div>
        <div @click="handleType('month')" class="item" :class="{ 'active': (listQuery.type == 'month') }">本月</div>
        <div @click="handleType('jidu')" class="item" :class="{ 'active': (listQuery.type == 'jidu') }">本季度</div>
        <div @click="handleType('year')" class="item" :class="{ 'active': (listQuery.type == 'year') }">本年度</div>
      </div>
      <el-row :gutter="20" style="margin-top:20px;">
        <el-col :span="6">
          <el-card class="box-card box">
            小店数量
            <p class="value">
              {{ forms.shopCount }}
            </p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card box">
            合伙人数量
            <p class="value">
              {{ forms.partnerCount }}
            </p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card box">
            平台待结算收益
            <p class="value">
              <span class="currency">￥</span>{{ forms.platformSettle }}
            </p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card box">
            平台已结算收益
            <p class="value">
              <span class="currency">￥</span>{{ forms.platformSettled }}
            </p>
          </el-card>
        </el-col>

        <el-col :span="24" style="margin-top:20px;">
          <el-card class="box-card">
            <v-chart autoresize :options="incomeReport" />
          </el-card>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="20" style="margin-top:20px;">
        <el-col :span="6">
          <el-card class="box-card box">
            提交审核商品
            <p class="value">
              {{ form.submitProductNum }}
            </p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card box">
            审核通过商品
            <p class="value">
              {{ form.auditProductNum }}
            </p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card box">
            待结算金额
            <p class="value">
              <span class="currency">￥</span>{{ form.waitSettleMoney }}
            </p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card box">
            已结算金额
            <p class="value">
              <span class="currency">￥</span>{{ form.settledMoney }}
            </p>
          </el-card>
        </el-col>

        <el-col :span="24" style="margin-top:20px;">
          <el-card class="box-card">
            <v-chart autoresize :options="incomeReport" />
          </el-card>
        </el-col>
      </el-row> -->
    </div>
  </section>
</template>

<script>
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/title'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import {
  admin_summary,
  admin_dashboard,
  panelStatistics,
  trendCharts
} from '../../api/user';
export default {
  components: {
    'v-chart': ECharts
  },
  data() {
    return {

      incomeReport: {
        title: {
          text: '收入趋势'
        },
        color: ['#1990FF', '#3DCCCC'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['本月', '上个月']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '本月',
            type: 'line',
            stack: '销量',
            data: []
          },
          {
            name: '上个月',
            type: 'line',
            stack: '销量',
            data: []
          },
        ]
      },
      forms: {
        shopCount: 0,
        partnerCount: 0,
        platformSettle: 0,
        platformSettled: 0
      },
      form: {
        auditProductNum: 0,
        submitProductNum: 0,
        waitSettleMoney: 0,
        settledMoney: 0,
      },
      listQuery: {
        type: "month"
      }
    };
  },
  mounted() {
  },
  created() {
    this.getData();
    this.getDashboard();
    this.getpanelStatistics()
    this.gettrendCharts()
  },

  methods: {
    handleType(type) {
      this.listQuery.type = type;
      // this.getData();
      this.getpanelStatistics()
    },
    toSend() {
      this.$router.push("/order_send")

    },
    gettrendCharts() {
      trendCharts().then((res) => {
        console.log(res.data)
        this.incomeReport.xAxis.data = res.data.day;
        this.incomeReport.series[0].data = res.data.valueMonth;
        this.incomeReport.series[1].data = res.data.valueOfLastMonth;
      })
    },

    getpanelStatistics() {
      panelStatistics(this.listQuery.type).then((res) => {
        console.log(res.data)
        this.forms.shopCount = res.data.shopCount
        this.forms.partnerCount = res.data.partnerCount
        this.forms.platformSettle = res.data.platformSettle
        this.forms.platformSettled = res.data.platformSettled
      })
    },
    getData() {
      admin_summary(this.listQuery).then((res) => {
        this.form.auditProductNum = res.data.auditProductNum;
        this.form.submitProductNum = res.data.submitProductNum;
        this.form.waitSettleMoney = res.data.waitSettleMoney;
        this.form.settledMoney = res.data.settledMoney;
      }).catch((err) => {

      })
    },
    getDashboard() {
      admin_dashboard().then((res) => {
        this.incomeReport.xAxis.data = res.data.income.day;
        this.incomeReport.series[0].data = res.data.income.valueMonth;
        this.incomeReport.series[1].data = res.data.income.valueOfLastMonth;
      }).catch((err) => {

      })
    }
  }
};
</script>
<style lang="scss" scoped>
.bii-box-section {
  .echarts {
    width: 100%;
  }

  .text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;

    .num {
      color: #F4222D;
      font-size: 42px;
      line-height: 42px;
      position: relative;
      margin: 0 2px;
      font-weight: 400;
      text-decoration: underline;
    }
  }

  .box {
    text-align: center;
    font-size: 14px;
    color: rgb(153, 153, 153);
    font-weight: 700;

    .value {
      font-size: 28px;
      line-height: 33px;
      color: #F4222D;
      height: 33px;

      .currency {
        font-size: 14px;
      }
    }

    .value3 {
      font-size: 28px;
      line-height: 33px;
      color: #000000;
      height: 33px;

      .currency {
        font-size: 14px;
      }
    }
  }
}
</style>
